<template>
	<view class="upd">
		<view class="con">
			<text>原密码</text>
			<input type="password" v-model="oldPwd" />
		</view>
		<view class="con">
			<text>新密码</text>
			<input maxlength="6" type="password" v-model="newPwd" />
		</view>
		<view class="con">
			<text>确认密码</text>
			<input maxlength="6" type="password" v-model="qdNewPwd" />
		</view>

		<view class="bottom">
			<view class="btn" @click="updatePwd">
				<text>确定修改</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		httpUpdatePwd
	} from '@/api/http/main/my/pay.js'

	export default {
		data() {
			return {
				oldPwd: '',
				newPwd: '',
				qdNewPwd: '',
			}
		},
		methods: {
			updatePwd() {
				if (this.oldPwd == '' || this.newPwd == '' || this.qdNewPwd == '') {
					return uni.$showMsg('请输入正确密码！');
				}
				if (this.newPwd != this.qdNewPwd) {
					return uni.$showMsg('两次密码不正确！');
				}
				
				if (this.newPwd.length != 6) {
					return uni.$showMsg('密码长度固定为6！');
				}

				httpUpdatePwd(this.newPwd, this.oldPwd).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					return uni.$showMsg('支付密码已修改！');
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.upd {
		width: 100%;
		min-height: 100vh;
		background-color: rgba(248, 248, 248, 1);
	}

	.con {
		width: 92%;
		padding: 0 4%;
		background-color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;

		text {
			width: 25%;
		}

		input {
			width: 70%;
			height: 60rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #eee;
		}
	}

	.bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;

		.btn {
			width: 60%;
			margin-left: 20%;
			height: 80rpx;
			border-radius: 50rpx;
			background-color: #26C55E;
			line-height: 80rpx;
			text-align: center;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>